<template>
    <div>
         <Breadcrumb :style="{margin: '10px 0'}">
            <Input search enter-button placeholder="Enter something..." style="width:300px" @on-search="search" v-model="keywords"/>                       
        </Breadcrumb>
       <div style="position:absolute;right:60px;z-index:999;top:106px">
            <Button  type="primary" @click="dataModal = true">添加</Button>
            <Button  type="error" @click="removes" >批量删除</Button>
       </div>
           
        
        <Table border :columns="columns7" :data="listData" style="margin-top:10px" @on-select="onSelect" ></Table>
        <Page :total="total" size="small" show-elevator show-sizer style="float:right;padding-top:10px" @on-change ="onChagePage" @on-page-size-change="onPageSizeChange"/>

       
        <Modal
            v-model="dataModal"
            title="数据处理"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="ID" prop="_id" style="opacity:0">
                    <Input v-model="formValidate._id" placeholder=""></Input>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
                </FormItem>
                <FormItem label="性别" prop="sex">
                    <RadioGroup v-model="formValidate.sex">
                        <Radio label="男">男</Radio>
                        <Radio label="女">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="年龄" prop="age">
                    <Input v-model="formValidate.age" placeholder="Enter your age"></Input>
                </FormItem>
                <FormItem label="血型" prop="boold">
                    <Select v-model="formValidate.boold" placeholder="Select your blood">
                        <Option value="A">A</Option>
                        <Option value="B">B</Option>
                        <Option value="AB">AB</Option>
                        <Option value="O">O</Option>
                    </Select>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formValidate.email" placeholder="Enter your e-mail"></Input>
                </FormItem>
                <FormItem label="居住地" prop="city">
                   <Input v-model="formValidate.city" placeholder="Enter your city"></Input>
                </FormItem>
                
            <FormItem label="生日">
                <Row>
                    <Col span="11">
                        <FormItem prop="date">
                            <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                        </FormItem>
                    </Col>                   
                </Row>
            </FormItem>            
            <!-- <FormItem label="爱好" prop="interest">
                <CheckboxGroup v-model="formValidate.interest">
                    <Checkbox label="美食"></Checkbox>
                    <Checkbox label="睡觉"></Checkbox>
                    <Checkbox label="旅游"></Checkbox>
                    <Checkbox label="唱歌"></Checkbox>
                    <Checkbox label="看电影"></Checkbox>
                </CheckboxGroup>
            </FormItem> -->
            <FormItem label="自我介绍" prop="desc">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        </Modal>
    </div>    
</template>
<script>
export default {
  data() {
    return {
      formValidate: {
        _id: null,
        name: "",
        sex: "",
        age: 0,
        boold: "",
        email: "",
        city: "",
        date: "",
        // interest: "",
        desc: ""
      },
      ruleValidate: {
        name: [
          {
            required: true
          }
        ],
        age: [
          {
            required: true
          }
        ],
        mail: [
          {
            requird: true
          },
          { requird: true }
        ],
        city: [
          {
            required: true
          }
        ],
        blood: [
          {
            required: true
          }
        ],
        gender: [{ required: true }],
       
        date: [
          {
            required: true
          }
        ],
        desc: [
          {
            required: true
          },
          {
            type: "string"
          }
        ]
      },
      columns7: [
        {
          type: "selection",
          width: 50
        },
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "性别",
          key: "sex",
          align: "center",
          width: 100
        },
        {
          title: "年龄",
          key: "age",
          align: "center"
        },
        {
          title: "血型",
          key: "boold",
          align: "center"
        },
        {
          title: "邮箱",
          key: "email",
          align: "center"
        },
        {
          title: "居住地",
          key: "city",
          align: "center"
        },
        {
          title: "生日",
          key: "date",
          align: "center"
        },
        // {
        //   title: "爱好",
        //   key: "interest",
        //   align: "center"
        // },
        {
          title: "自我介绍",
          key: "desc",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      //console.log(params);
                      this.remove(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      listData: [],
      page: 1,
      limit: 10,
      total: 0,
      keywords: "",
      dataModal: false,
      ids: [],
      selections: null
    };
  },
  methods: {
    edit(id) {
      this.axios({
        url: `http://localhost:3000/users/data/${id}`,
        method: "get"
      }).then(res => {
        this.formValidate = res.data;
        this.dataModal = true;
      });
    },
    remove(id) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>你确认删除记录吗？</p>",
        onOk: () => {
          this.axios({
            url: `http://localhost:3000/users/data/${id}`,
            method: "delete"
          }).then(res => {
            // console.log(res);
            this.getList();
          });
        }
      });
    },
    removes() {
      this.$Modal.confirm({
        //确认删除对话框
        title: "确认删除",
        content: "<p>你确认删除选中数据？</p>",
        onOk: () => {
          //console.log(111)
          for (let i = 0; i < this.selections.length; i++) {
            this.ids.push(this.selections[i]._id);
          }
          //console.log(this.ids.toString());
          this.axios({
            method: "delete",
            url: `http://localhost:3000/users/removes`,
            data: {
              ids: this.ids
            }
          }).then(res => {
            // console.log(res);
            this.getList(this.page);
          });
        }
      });
    },
    getList(page) {
      this.axios({
        url: `http://localhost:3000/users/list/?page=${this.page}&limit=${
          this.limit
        }&name=${this.keywords}`,
        method: "post",
        data: {
          page: page,
          name: this.name
        }
      }).then(res => {
        //console.log(res);
        this.total = res.data.total;
        this.listData = res.data.rows;
      });
    },
    onChagePage(page) {
      // console.log(page);
      this.page = page;
      this.getList(page);
    },
    onPageSizeChange(pageSize) {
      //console.log(pageSize);
      this.limits = pageSize;
      this.getList();
    },
    search(value) {
      this.name = value;
      this.getList();
    },
    ok() {
      //this.formValidate = this.InitformValidate;
      this.$Message.info("Clicked ok");
    },
    cancel() {
      // this.formValidate = this.InitformValidate;
      this.$Message.info("Clicked cancel");
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate._id !== null) {
            this.axios({
              url: `http://localhost:3000/users/data/${this.formValidate._id}`,
              method: "put",
              data: this.formValidate
            }).then(res => {
              this.dataModal = false;
              this.getList(this.page);
              this.formValidate._id = null;
              this.handleReset(name);
              // Object.assign(this.$data, this.$options.data());
              this.$Message.success("Success!");
            });
          } else {
            delete this.formValidate._id;

            //Object.assign(this.$data, this.$options.data());
            this.axios({
              url: "http://localhost:3000/users/data",
              method: "post",
              data: this.formValidate
            }).then(res => {
              this.dataModal = false;
              this.getList(this.page);
              this.formValidate._id = null;
              this.$Message.success("Success!");
              this.handleReset(name);
            });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    onSelect(selection, row) {
      this.selections = selection;
      console.log(this.selections);
    }
  },

  mounted() {
    this.getList();
  }
};
</script>
